<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
    <input type="text" id="mobile" name="username">
    <span id="info"></span>
    <script>

        mobile.onkeyup = function () {
            var mail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

            // 1 首位不能是0  ^[1-9]
            // 2 必须是 [5, 11] 位的数字  \d{4, 9}
            var qq = /^[1-9][0-9]{4,9}$/;

            var url = /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/;

            var s = document.getElementById('info');
            if(mail.test(this.value)){
                s.style.color = 'green';
                s.innerText = '正确';
            }else if(qq.test(this.value)){
                s.style.color = 'green';
                s.innerText = '正确';
            }else if(url.test(this.value)){
                s.style.color = 'green';
                s.innerText = '正确';
            }else {
                s.style.color = 'red';
                s.innerText = '错误';
            }
        };
    </script>
</body>
</html>